<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>${sessionScope.username}</title>
<script type="text/javascript" src="jquery-3.5.1.min.js"></script>

<script type="text/javascript">
	//1、定义websocket对象
	var ws;
	//2、设置连接websocket的URL
	var ws_url = "ws://127.0.0.1:8080/chartroom-websocket/websocket/chatroom"
	//3、定义json对象
	var msg;
	$(function() {
		//调用连接websocket的方法
		ws_connect();
		//点击按钮发送消息的方法事件
		$("#send").click(function () {
			ws_sendMsg();
			scrollToBottom();
		});
		//绑定双击事件，给每一个列表绑定事件
		$("body").on("dblclick",".userName",function(){
			var loginName = '${sessionScope.username}';
			//获取列表的用户的名称
			var userName = $(this).attr("id");
			
			if(loginName == userName){
                alert("不能跟自己聊天!!!");
                return;
            }
			
			//将获取的用户的名称填充到文本输入框中
			$("#msg").val("@" + userName + ":");
		});
		
		//给点击发送图片按钮绑定点击事件
		$("#uploadImg").on("click",function(){
			ws_sendImg();
			scrollToBottom();
		});
		//给button按钮加回车事件
		$("body").keydown(function () {
	        if (event.keyCode == "13") {//keyCode=13是回车键
	        	$('#send').click();//换成按钮的id即可
	        }
	    });
	});
	//websocket连接的方法
	function ws_connect() {
		//获取登陆进来的用户名
		var loginName = '${sessionScope.username}';
		//打印输出效果
		console.log('loginName: ['  + loginName + ']');
		if ('WebSocket' in window) {
			ws = new WebSocket(ws_url + "?loginName=" + loginName);
        } else if ('MozWebSocket' in window) {
        	ws = new MozWebSocket(ws_url + "?loginName=" + loginName);
        } else {
            Console.log('Error: WebSocket is not supported by this browser.');
            return;
        }

		ws.onopen = function () {
            console.log('Info: WebSocket connection opened.');
        };

        ws.onclose = function () {
            console.log('Info: WebSocket closed.');
        };
		//接收后台传过来的信息
        ws.onmessage = function (message) {
            console.log(message.data);
            
            //判断message.data是文本消息还是文件消息
            if("string" == typeof(message.data)){
            	//表示文本消息
            	//获取当前表格内有多少行
                var rows = $("#record").find("tr").length;
                //定义初始值的颜色为黑色
                var colorMsg = "black";
                //判断行数对2取余是否等于0
                if(rows % 2 == 0){
                	//颜色为绿色
                	colorMsg = "green";
                }
                
                //1、获取返回响应消息的聊天内容
                var getMsgContent = message.data;
                //将json字符串转变成JSON对象
                msg = JSON.parse(getMsgContent);
                //2、拼接html字符串，显示消息体
                var html = "<tr style='float:left;clear: both;margin-left:40%;'><td style='color:red;'>"+ msg.msgInfo +"</td></tr>";
                //判断消息是系统消息，还是用户消息
                if(msg.msgType == "System"){
                	//表示系统消息
                	//3、追加到table中
                    $("#record").append(html);
                	
                 	//定义初始值的颜色为黑色
                    var colorUserListMsg = "black";
                   
                	
                	//显示右边用户的列表
                	var userListHTML = "<tr height='15'><td align='center' style='color:black;background-color:#66CCFF;font-size:16px;opacity:.6;'>用户列表</td></tr>";
                	var userList = msg.userList;
                	
                	for(var i = 0; i < userList.length; i++){
                		//初始化一下
                		colorUserListMsg = "pink";
                		 //判断行数对2取余是否等于0
                        if(i % 2 == 0){
                        	//颜色为绿色
                        	colorUserListMsg = "green";
                        }
                		 
                		//判断当前的列表的用户名和我登陆进来的用户名是否一样，如果一样就突出显示
                		if(userList[i] == loginName){
                			userListHTML = userListHTML + "<tr height='15'><td align='center' class='userName' id='"+userList[i]+"' style='color:red;background-color:#000;font-size:16px;opacity:.6;'>"+userList[i]+"</td></tr>";
                		}else{
                			userListHTML = userListHTML + "<tr height='15'><td align='center' class='userName' id='"+userList[i]+"' style='color:"+colorUserListMsg+";font-size:16px;background-color:#000;opacity:.6;'>"+userList[i]+"</td></tr>";
                		}
                		
                	}
                	
                	$("#userList").html(userListHTML);
                }else if(msg.msgType == "UserInfo"){
                	//表示用户消息
                	//判断群聊还是私聊
                	if(msg.msgRecipient){
                		//表示私聊
                		//如果当前发送者是自己，那就把发送的消息显示在右边
                		if(msg.msgOriginator == loginName){
                			$("#record").append("<tr style='float:right;clear: both;'><td style='color:" + colorMsg + ";text-align:right;'><font size= '3'>["+ msg.msgOriginator +"对" + msg.msgRecipient +"]说:"+msg.msgDateTimeStr+"</font><div style='width:350px;text-align:right;'><font size = '4'>"+msg.msgInfo+"</font></div></td></tr>");
                		}else{
                			$("#record").append("<tr style='float:left;clear: both;'><td style='color:" + colorMsg + ";'><font size= '3'>["+ msg.msgOriginator +"对" + msg.msgRecipient +"]说:"+msg.msgDateTimeStr+"</font><div style='width:350px;text-align:left;'><font size = '4'>"+msg.msgInfo+"</font></div></td></tr>");
                		}
                		
                	}else{
                		//表示群聊
                		if(msg.msgOriginator == loginName){
                			$("#record").append("<tr style='float:right;clear: both;'><td style='color:" + colorMsg + ";text-align:right;'><font size= '3'>["+ msg.msgOriginator +"对所有人说]:"+msg.msgDateTimeStr+"</font><div style='width:350px;text-align:right;'><font size = '4'>"+msg.msgInfo+"</font></div></td></tr>");
                		}else{
                			$("#record").append("<tr style='float:left;clear: both;'><td style='color:" + colorMsg + ";'><font size= '3'>["+ msg.msgOriginator +"对所有人说]:"+msg.msgDateTimeStr+"</font><div style='width:350px;text-align:left;'><font size = '4'>"+msg.msgInfo+"</font></div></td></tr>");
                		}
                		
                	}
                }else if(msg.msgType == "img"){
                	//表示发送图片的消息
                	if(msg.msgOriginator == loginName){
                		$("#record").append("<tr style='float:right;clear: both;'><td style='color:black;'><font size= '3'>["+ msg.msgOriginator +"对所有人说]:"+msg.msgDateTimeStr+"</font><br/>");
                	}else{
                		$("#record").append("<tr style='float:left;clear: both;'><td style='color:black;'><font size= '3'>["+ msg.msgOriginator +"对所有人说]:"+msg.msgDateTimeStr+"</font><br/>");
                	}
                	
                }else{
                	//表示待扩展 
                	$("#record").append("<tr><td>待扩展</td></tr>");
                }
            }else{
            	//表示文件消息
            	
            	//创建读取二进制流的对象
            	var reader = new FileReader();
            	//触发onload事件
            	reader.onload = function loaded(evt){
            		//判断是否读取成功
            		if(evt.target.readyState == FileReader.DONE){
            			var url = evt.target.result;
            			if(msg.msgOriginator == loginName){
            				$("#record").append("<img style='max-height:150px;max-width:120px;vertical-align:middle;float:right;clear: both;' src='"+ url +"'/></td></tr>");
            			}else{
            				$("#record").append("<img style='max-height:150px;max-width:120px;vertical-align:middle;float:left;clear: both;' src='"+ url +"'/></td></tr>");
            			}
            			
            		}
            	}
            	reader.readAsDataURL(message.data);
            }
            
            
        };
	};
	//websocket发送消息的方法
	function ws_sendMsg() {
		//1、获取输入文本框发送消息的值
		var sendMsgContent = $("#msg").val();
		
		//判断文本输入框不能为空
		if(!sendMsgContent){
			alert("请输入信息,文本框不能为空!!!");
			return;
		}
		
		//2、发送消息
		ws.send(sendMsgContent);
		scrollToBottom();
		//3、发送完消息之后，清除文本框里面的值
		sendMsgContent = $("#msg").val("");
		
	};
	//websocket发送图片的方法
	function ws_sendImg() {
		//获取上传的所有的文件
		//$("#img")[0] 表示将jQuery对象转换成JavaScript对象
		var imgCont = $("#img")[0].files[0];
		
		//判断文本输入框不能为空
		if(!imgCont){
			alert("请选择文件，再上传!!!");
			return;
		}
		
		//判断文件是否选中不为空
		if(imgCont){
			//1、创建FileRead流对象，将文件对象转换成流
			var reader = new FileReader();
			//2、将imgCont的文件对象，以二进制流的方式读进reader里面
			reader.readAsArrayBuffer(imgCont);
			//3、以文件二进制流读取完成之后，触发onLoad事件
			reader.onload = function loaded(evt){
				//将读进来的二进制流，读取出来发送消息给后台
				ws.send(evt.target.result);
				scrollToBottom();
			}
			
			//发送成功后，初始化一下
			$("#img").val("");
		}else{
			//初始化一下
			$("#img").val("");
			return;
		}
	};
	
	//div滚动条(scrollbar)保持在最底部
    function scrollToBottom(){
        //var div = document.getElementById('chatCon');
    	var now = new Date();
    	var div = document.getElementById('record');
    	div.scrollTop = div.scrollHeight;
    }
</script>
</head>
<body style="background-image: url('');background-repeat: no-repeat;background-size: 100%">
	<table style="border:1px solid white;margin: 30px auto;border-radius: 15px;box-shadow: 0px 0px 25px #333;">
		<tbody>
			<tr>
				<td colspan="2" align="center" height="80px;" style="background-color: #000;color: #fff;opacity: .8">
					<h3>欢迎 <span style="color: red;font-weight: 800;">[${sessionScope.username}]</span> 进入迷你聊天室!!!</h3>
				</td>
			</tr>
			<tr>
				<!-- 显示消息聊天内容的区域 -->
				<td width="800px" height="300px"
				style="border:1px solid white;vertical-align: top;"
				id="content">
					<!-- <div style="background-color:white;overflow-y:auto;height:300px;width:500px;" id="tbDiv"> -->
					<div id="up" style="width: 100%;">
						<table id="tbRecord" style="width: 100%">
							<tbody id="record" style="display: block; height: 400px; width: 100%;overflow: auto;"></tbody>
						</table>
					</div>
				</td>
				<!-- 显示用户的列表区域 -->
				<td width="140px" style="border:1px solid white;vertical-align: top;">
					<div style="overflow: auto;width: 100%;">
						<table style="width: 100%;" id="tbuserList">
							<tbody id="userList" style="display: block;height: 400px;overflow: auto;width: 100%;">
								
							</tbody>
						</table>
					</div>
				</td>
			</tr>
			
			
		</tbody>
		
		<tfoot>
			<tr>
				<td colspan="2" align="center">
					<input id="msg" name="msg" style="width: 100%;height:40px;opacity: .6" placeholder="输入信息"/>
				</td>
			</tr>
		
			<tr>
				<td colspan="2" align="center">
					<button style="margin: 0 30px 0 30px;opacity: .6" id="send" name="send">发送消息</button>
					<input type="file" id="img" multiple="multiple" style="width:200px; height: 30px;opacity: .6"/>
					<button id="uploadImg" name="uploadImg" style="opacity: .6;">发送图片</button>
					<button style="margin: 0 30px 0 30px;opacity: .6" id="disconnect" name="disconnect">断开连接</button>
				</td>
			</tr>
		</tfoot>
	</table>
	
	<div style="text-align: center;font-size: 12px;width:100%;position: absolute;bottom: 0;left: 0;background-color: #000;color: #fff;opacity: .2">
		<h3>作者: 甘茂旺</h3>
		<h3>QQ: 486566947</h3>
		<h3>电话: 13414786942</h3>
		<h3>地址: 广东省惠州市惠东县吉隆镇吉隆中学附近</h3>
	</div>
</body>
</html>